<!DOCTYPE html>
<html>
<head>
	<title>JeversonJeeHTMLRoad</title>
	<style type="text/css">
		/*01爱宠知识*/
		/*body,ul,li{
			margin: 0;
			padding: 0;
		}
		ul,li{
			list-style: none;
		}
		.box{
			background: url("bg.gif");
			width: 260px;
			height: 327px;
			margin: 10px auto;
			border: 1px solid #009900;
		}
		.box .title{
			border-left: 4px solid #C9E143;
			margin: 10px 0 5px 10px;
			padding-left: 11px;
			height: 23px;
			font: 16px/23px microsoft yahei;
			color: #fff;
		}
		.box ul{
			background: #fff;
			height: 279px;
			width: 210px;
			padding: 0 15px;
			margin-left: 10px;
		}
		li{
			height: 30px;
			border-bottom: 1px dashed #666;
			background: url(tb.gif) no-repeat left center;
			padding-left: 16px;
			line-height: 30px;
			background: url("tb.gif") no-repeat left center;
		}
		a{
			text-decoration:  none;
		}
		*/
		/*02个人资料*/
		/*.box{
			width: 208px;
			height: 384px;
			border: 1px solid #cecece;
			margin: 10px auto;
		}
		.box .title{
			height: 25px;
			padding-left: 9px;
			font: 14px/25px microsoft yahei;
			background: #ECEDEE;
		}
		.box .pic{
			width: 180px;
			height: 180px;
			border: 1px solid #cecece;
			margin: 10px 0 11px 13px;
		}
		.box .blink{
			height: 27px;
			text-align: center;
		}
		.box .blink img{
			margin-left: 10px;
		}
		.box .weibo{
			height: 33px;
			text-align: center;
			border-bottom: dotted 1px #D1D1D1; 
			margin-bottom: 20px;

		}
		.box .weibo input{
			width: 68px;
			height: 23px;
			background: #EEEEF2 url("vb.jpg") no-repeat;
		}
		.box .friend{
			text-align: center;
		}
		input{
			width: 67px;
			height: 21px;
			margin: 0 5px 5px 0;
		}*/
		/*3浮动原理*/
		/*body{
			margin: 0;
		}
		.red,.green,.blue{
			height: 200px;
			width: 200px;
		}
		.red{
			background: red;
			float: left;
		}
		.green{
			background: green;
			float: left;
		}
		.blue{
			background: blue;
			float: right;
		}
		span{
			float: left;
			background: pink;
			width: 100px;
			height: 200px;
		}*/
		/*04文本绕图*/
		/*.box{
			width: 400px;
			height: 300px;
			background: #eee;
		}
		.box img{
			float: left;
		}*/
		/*05浮动应用场景之二导航栏初体验*/
		/*body,ul,li{
			margin: 0;
			padding: 0;
		}
		ul,li{
			list-style: none;
		}
		.nav{
			width: 800px;
			height: 40px;
			margin: 20px auto;
			background: pink;
		}
		.nav ul li{
			float: left;
		}
		.nav ul li a{
			display: inline-block;
			height: 40px;
			font: 14px/40px microsoft yahei;
			padding: 0 20px;
			text-decoration: none;
		}
		.nav ul li a:hover{
			background: #aaa;
		}*/
		/*06上和导航栏*/
		/*.body,ul,li{
			padding: 0;
			margin: 0;
		}
		ul,li{
			list-style: none;
		}
		.nav{
			height: 55px;
			background: url("head_bg.jpg");
			margin-top: 30px;
			border-top: 1px;
		}
		.nav-con{
			width: 1000px;
			margin: 0 auto;
			height: 55px;
			position: relative;
		}
		.nav-con ul li{
			float: left;
			background: url("li_bg.png") no-repeat right;
			height: 55px;
			padding: 0 30px;
		}
		.nav-con ul li a{
			display: inline-block;;
			height: 55px;
			font: 18px/55px microsoft yahei;
			text-decoration: none;
			color: #000;
		}
		.nav-con ul li a:hover{
			color: green;
		}
		.news{
			position: absolute;
			left: 30px;
			bottom: 40px;
		}*/
		/*07浮动布局*/
		/*.header,.footer,.main{
			width: 500px;
		}
		.header,.footer{
			height: 100px;
			background: #000;
		}
		.main{
			height: 300px;
			background: #eee;
			margin: 10px 0;
		}
		.content{
			width: 300px;
			height: 300px;
			background: orange;
			float: left;;
		}
		.sidebar{
			width: 190px;
			height: 300px;
			background: green;
			float: right;
		}*/
		/*08网页布局*/
		/*.header,.main,.footer{
			width: 500px;
		}
		.header,.footer{
			height: 100px;
			background: pink;
		}
		.main{
			background: blue;
		}
		.left,.right{
			width: 100px;
			height: 300px;
		}
		.left{
			background: orange;
			float: left;
		}
		.content{
			width: 300px;
			height: 300px;
			background: yellow;
			float: left;
		}
		.right{
			background: green;
			float: right;
		}
		.content-top,.content-bot{
			height: 150px;
		}
		.content-top{
			background: #660000;
		}
		.content-bot{
			background: #000066;
		}
		.clearfix:after{
			content: ".";
			display: block;
			height: 0;
			line-height: 0;
			visibility: hidden;;
			clear: both;;
		}*/
		/*兼容ie浏览器*/
		/*.clearfix{
			zoom: 1;
		}*/
		/*09清除浮动*/
		/*.header,.main,.footer{
			width: 500px;
		}
		.header,.footer{
			height: 100px;
			background: #000;
		}
		.content{
			width: 300px;
			height: 300px;
			background: orange;
			float: left;
			margin-top: -100px;
		}
		.siderbar{
			width: 190px;
			height: 300px;
			background: green;
			float: right;
		}
		.main{
			background: #eee;
			margin: 10px 0;
		}
		.clearfix:after{
			content: ".";
			display: block;
			height: 0;
			line-height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix{
			zoom: 1;
		}
		.box{
			width: 300px;
			height: 300px;
			background: #eee;
			overflow: auto;
		}*/
		/*12静态定位*/
		/*body{
			margin: 0;
		}*/
		/*.father{
			width: 300px;
			height: 300px;
			background: green;
			position: absolute;
		}
		.box{
			width: 100px;
			height: 100px;
			background: red;
			position: absolute;
			left: 10px;
			bottom: 10px;
		}*/
		/*.baby{
			position: absolute;
			width: 100px;
			height: 100px;
			background: orange;*/
			/*调整元素的层叠顺序*默认值0-999，值越大，元素越在上边*/
		/*	z-index: 2;
		}
		.baby1{
			position:absolute;
			width: 100px;
			height: 100px;
			background: red;
		}*/
		/*14小米定位方案*/
	/*	.box{
			width: 1226px;
			height: 460px;
			position: relative;
		}
		.pic{
			position: absolute;
			left: 0;
			top: 0;
		}
		.left{
			position: absolute;
			left: 250px;
			bottom: 180px;
		}
		.right{
			position: absolute;
			right: 0;
			bottom: 180px;
		}*/
		/*15固定定位*/
		.box,.box1{
			width: 100px;
			height: 100px;
		}
		.box{
			background: red;
			position: fixed;
			left: 2px;
		}
		.box{
			background: green;
		}
	</style>
</head>
<body>
	<!-- <div class="box"> -->
		<!-- 01爱宠知识 -->
		<!--<div class="title">爱宠知识</div>
		<ul>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
			<li><a href="#">养狗比养猫更健康</a></li>
		</ul>	
	</div>-->
	<!-- 02个人资料 -->
<!-- 	<div class="box">
		<div class="title">个人资料</div>
		<div class="pic">
			<img src="1.jpg" alt="">
		</div>
		<div class="blink">V闪闪<img src="v.jpg" alt=""></div>
		<div class="weibo">
			<input type="button" value="微博"></input>
		</div>
		<div class="friend">
			<input type="button" value="加好友"></input>
			<input type="button" value="发纸条"></input>
			<input type="button" value="加好友"></input>
			<input type="button" value="加好友"></input>
		</div>
	</div>
 -->
 	<!-- <div class="red"></div>
 	<div class="green"></div>
 	<div class="blue"></div>
 	<span></span> -->
 	<!--浮动应用场景之一文本绕图-->
 	<!-- <div class="box">
 		<img src="1.jpg" alt="jeversonjee">
 		<p>浮动应用场景之一文本绕图</p>
 		<p>浮动应用场景之一文本绕图</p>
 		<p>浮动应用场景之一文本绕图</p>
 		<p>浮动应用场景之一文本绕图</p>
 		<p>浮动应用场景之一文本绕图</p>
 		<p>浮动应用场景之一文本绕图</p>
 		<p>浮 动应用场景之一文本绕图</p>
 	</div>-->
 	<!-- <div class="nav">
 		<ul>
 			<li><a href="#">浮动应用场景之二</a></li>
 			<li><a href="#">简单导航栏</a></li>
 			<li><a href="#">最初体验之二</a></li>
 		</ul>-->
 		<!-- 06上和导航栏 -->
 		<!-- <div class="nav">
 			<div class="nav-con">
 				<ul>
 					<li><a href="#">智能手机</a></li>
 					<li><a href="#">平板电脑</a></li>
 					<li><a href="#">百度</a></li>
 					<li><a href="#">么么么</a></li>
 				</ul>
 				<div class="news"><img src="new.png"></div>
 			</div>
 		</div>-->
 		<!-- 07 浮动布局 -->
 		<!-- <div class="header"></div>
 		<div class="main">
 			<div class="content"></div>
 			<div class="sidebar"></div>
 		</div>
 		<div class="footer"></div> -->
 		<!-- <div class="header"></div>
 		<div class="main clearfix">
 			<div class="left"></div>
 			<div class="content">
 				<div class="content-top"></div>
 				<div class="content-bot"></div>
 			</div>
 			<div class="right"></div>
 		</div>
 		<div class="footer"></div>
 	</div> -->
 	<!-- <div class="header"></div>
 	<div class="mian">
 		<div class="content"></div>-->
 		<!-- <div class="sidebar"></div> -->
 		<!-- 额外标签法 -->
 		<!-- <div style="clear: both;"></div>
 	</div>
 	<div class="footer"></div>-->
 	<!-- <div class="box">
 		<img src="1.jpg">
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 		<p>jeversonjee is ur father</p>
 	</div>-->
 		<!-- <div class="father">
 			<div class="box"></div>
 		</div> -->
 		<!-- <span class="baby"></span>
 		<span class="baby1"></span> -->
 		<!-- <div class="box"><img src="111.jpg">
 			<div class="pic"><img src="xiaom_left.png"></div>
 			<div class="left"><img src="left.png"></div>
 			<div class="right"><img src="right.png"></div> -->

 			<div class="box"></div>
 			<div class="box1"></div>
 			<span class="box"></span>
 		</div>
 	</body>
</html>